<script setup lang="ts">
import LocalSearchSongItem from '@/components/search/LocalSearchSongItem.vue'
import OnlineSearchSongItem from '@/components/search/OnlineSearchSongItem.vue'
import OnlineSearchSongList from '@/components/search/OnlineSearchSongList.vue'
import LocalSearchSongList from '@/components/search/LocalSearchSongList.vue'
import OnlineSearchArtistList from '@/components/search/OnlineSearchArtistList.vue'
import OnlineSearchArtistItem from '@/components/search/OnlineSearchArtistItem.vue'
import OnlineSearchAlbumList from '@/components/search/OnlineSearchAlbumList.vue'
import OnlineSearchAlbumItem from '@/components/search/OnlineSearchAlbumItem.vue'
import { computed, type PropType } from 'vue'
import logo from "@/assets/logo.png"
import { toHighLightHtml } from "@/utils/stringUtils"

const props = defineProps({
  LocalSearchResult: {
    type: Object as PropType<LocalSongSearchResult>,
    default: () => { return { myLike:[],queue:[],recently:[] }}
  },
  searchKey: String,
  OnlineSearchResult:{
    type:Object as PropType<searchResult>,
    default: () => { return { albums:[],artists:[],songs:[] }}
  },
  close:{
    type: Function,
    default: ()=>{}
  }
})

import { useRouter} from 'vue-router'
const router = useRouter()

const emit = defineEmits(['update:search'])

const searchCount = computed(()=>{
  return props.LocalSearchResult.myLike.length + props.LocalSearchResult.queue.length +  props.LocalSearchResult.recently.length  + props.OnlineSearchResult?.songs.length + props.OnlineSearchResult?.artists.length + props.OnlineSearchResult?.albums.length
})

const handleSearchSong = (e: Event,name: string)=>{
  console.log("on search song")
  e.preventDefault()
  props.close()
  router.push("/search/songs/" + name)

}

const handleSearchAlbum = (e: Event,name: string)=>{
  console.log("on search song")
  e.preventDefault()
  props.close()
  router.push("/search/album/" + name)

}

const handleSearchArtist = (e: Event,name: string)=>{
  console.log("on search song")
  e.preventDefault()
  props.close()
  router.push("/search/artist/" + name)

}

const handleLocalMyLike = (e: Event,id: string)=>{
  e.preventDefault()
  props.close()
  router.push("/myLike/?play=" + id)

}

const handleLocalRecently = (e: Event,id: string)=>{
  e.preventDefault()
  props.close()
  router.push("/recentlyPlayed/?play=" + id)

}

const handleLocalQueue = (e: Event,id: string)=>{
  e.preventDefault()
  props.close()
  router.push("/auditionList/?play=" + id)

}



</script>

<template>
<div class="searchView" v-if="searchCount > 0">
  <div class="myMusic" v-if="LocalSearchResult.myLike.length + LocalSearchResult.queue.length +  LocalSearchResult.recently.length > 0">
    <header>我的音乐</header>
      <LocalSearchSongList>
        <LocalSearchSongItem v-for="item in LocalSearchResult?.myLike"
                             :songName="toHighLightHtml(item.title,searchKey ? searchKey : '','red')"
                             area="我喜欢"
                             :artist-name="item.artist_name"
                             :close="close"
                             @click="handleLocalMyLike($event,item.id)"
                             :key="item.id">

        </LocalSearchSongItem>
        <LocalSearchSongItem v-for="item in LocalSearchResult?.queue"
                             :songName="toHighLightHtml(item.title,searchKey ? searchKey : '','red')"
                             area="播放队列"
                             :artist-name="item.artist_name"
                             :close="close"
                             @click="handleLocalQueue($event,item.id)"
                             :key="item.id">

        </LocalSearchSongItem>
        <LocalSearchSongItem v-for="item in LocalSearchResult?.recently"
                             :songName="toHighLightHtml(item.title,searchKey ? searchKey : '','red')"
                             area="最近播放"
                             :artist-name="item.artist_name"
                             @click="handleLocalRecently($event,item.id)"
                             :close="close"
                             :key="item.id">

        </LocalSearchSongItem>
      </LocalSearchSongList>
  </div>
  <div class="online" v-if="OnlineSearchResult?.songs.length + OnlineSearchResult?.artists.length + OnlineSearchResult?.albums.length >0">
    <header>在线音乐</header>
    <OnlineSearchSongList v-if="OnlineSearchResult?.songs.length >0">
      <OnlineSearchSongItem v-for="item in OnlineSearchResult.songs"
                            :songName="toHighLightHtml(item.title,searchKey ? searchKey : '','red')"
                            :artist-name="toHighLightHtml(item.artist_name,searchKey ?? '','red')"
                            @click="handleSearchSong($event,item.title)"
                            :key="item.id">

      </OnlineSearchSongItem>
    </OnlineSearchSongList>
    <OnlineSearchArtistList v-if="OnlineSearchResult?.artists.length >0">
      <OnlineSearchArtistItem v-for="item in OnlineSearchResult.artists"
                              :artist-name="toHighLightHtml(item.name,searchKey ? searchKey : '','red')"
                              :artist-img="item.image ? item.image: logo"
                              @click="handleSearchArtist($event,item.name)"
                              :key="item.id">

      </OnlineSearchArtistItem>
    </OnlineSearchArtistList>
    <OnlineSearchAlbumList v-if="OnlineSearchResult?.albums.length >0">
      <OnlineSearchAlbumItem v-for="item in OnlineSearchResult.albums"
                             :album-name="toHighLightHtml(item.name,searchKey ? searchKey : '','red')"
                             :key="item.id"
                             @click="handleSearchAlbum($event,item.name)"
                             :album-img="item.cover ? item.cover : logo"
                              >
      </OnlineSearchAlbumItem>
    </OnlineSearchAlbumList>
  </div>
</div>
  <div class="searchNotFoundView" v-else>
    <div>搜索结果不存在</div>
  </div>

</template>

<style scoped lang="scss">
.searchView{
  width: 460px;
  background-color: #fff;
  border-radius: 8px;
  padding: 5px 9px 5px 9px;
  box-shadow: grey 1px 1px 8px;

  .myMusic{
    width: 100%;
  }

  header{
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    border-bottom: 1px solid  #eee;
  }

  ul{
    margin: 5px;
  }
}
.searchNotFoundView{
  width: 460px;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px 10px;
  box-shadow: grey 1px 1px 8px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>